<template>
<div>
  <div v-if="policyCenterDialogVisible" class="mod-user">
    <!-- 资质项页面 -->
    <el-form class="policyForm">
      <!-- <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-input :clearable="true" class="inputcss" v-model="conditions.qualiName" placeholder="请输名称查询"></el-input>
        <el-button @click="clickInquire()">查询</el-button>
        <el-button @click="clickGetData()">重置</el-button>
        <el-button type="primary" plain v-if="isAuth('sys:policy:save')" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>

<div class="div-tab">

  <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="总承包" name="first">
        
    </el-tab-pane>
    <el-tab-pane label="专业承包" name="second">
        
    </el-tab-pane>
  </el-tabs>


</div>

 <el-table
    class="table-eee"
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :max-height="tableHeight"
    >
    <el-table-column
      prop="qualiName"
      label="资质项"
      align="center"
      min-width="280">
    </el-table-column>
    <el-table-column
      prop="gradeTag"
      label="资质等级"
      align="center"
      min-width="150">
      <template slot-scope="scope">
<span v-if="scope.row.gradeTag == 0">特级</span>
<span v-if="scope.row.gradeTag == 1">一级</span>
<span v-if="scope.row.gradeTag == 2">二级</span>
<span v-if="scope.row.gradeTag == 3">三级</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="needCert"
      label="所需证书"
      align="center"
      :show-overflow-tooltip="true"
      min-width="350">
    </el-table-column>
    <el-table-column
      prop="orderNum"
      align="center"
      min-width="150"
      label="排序">
    </el-table-column>
    <el-table-column
      prop="statusFlag"
      align="center"
      min-width="150"

      label="状态">
      <template slot-scope="scope">
        <span v-if="scope.row.statusFlag == 1">有效</span>
        <span v-if="scope.row.statusFlag == 2">无效</span>

      </template>
    </el-table-column>

    <el-table-column
      label="操作"
      align="center"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClickModification(scope.row.id)" type="text" size="small">修改</el-button>
        <el-button @click="handleClickDelete(scope.row.id)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNum"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </div>

 <sys-modification :dataListEdit="dataListEdit" v-else ></sys-modification>

</div>

</template>
<script>

import Vue from 'vue'
import SysModification from './sys-modification.vue'
export default {
  data () {
    return {
    isEdit: false,
    activeName: 'first',
    tableHeight:0,
    policyCenterDialogVisible:true,
    dataListEdit:{},
	conditions: {
		typeTag: 1,
		qualiName: "",
		gradeTag: ''
	},
	inOrder: "",
	orderBy: "",
    tableData:[],

options:[
{
 id:0,
 name:'有效'
},
{
 id:1,
 name:'无效'
},
],
optionsA:[],

        ruleRule:{
        name: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请填写网站路径', trigger: 'blur' }
        ],
        typeCode: [
        { required: true, message: '请选择分类', trigger: 'blur' }
        ],

        },
    input:'',
  // 当前页数
  pageNum:1,
  // 每页条数
  pageSize:20,
  totalCount:0,
  // isPics: true,
    }
  },
  components:{
  SysModification
  },
  created(){
  this.getPolicyList()
  this.adjustTableHeight()
  },
  watch: {
  },
  methods:{
          adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 247;
        })
      },
  addOrUpdateHandle(){
  this.dataListEdit = {}
  this.policyCenterDialogVisible = false
  this.isEdit = false
  },
  clickBacks(){
  this.policyCenterDialogVisible = true
  this.getPolicyList()
  },
  handleChange(){
  console.log(123)
  },
  handleClick(tab, event) {
    console.log(this.activeName);
    if(this.activeName == 'first'){
      this.conditions.typeTag = 1
      this.getPolicyList()
    }
    if(this.activeName == 'second'){
      this.conditions.typeTag = 2
      this.getPolicyList()
    }
  },
  clickFalseLink(){

  },
  // 重置
  clickGetData(){
  this.conditions.qualiName = '',
  this.clickInquire()
  },
  // 查询
  clickInquire(){
  this.getPolicyList()
  },
  // 获取数据
  getPolicyList(){
           this.$http({
              url: this.$http.adornUrl(`/sys/quali/paging`),
              method: 'post',
              data: this.$http.adornData({
               	"conditions":this.conditions,
               	"inOrder": "",
               	"orderBy": "",
               	"pageNum": this.pageNum,
               	"pageSize":this.pageSize
               })
            }).then(({data}) => {
              if (data.code === 0) {
              this.tableData = data.data.records
              this.totalCount = data.data.total
              } else {
                this.$message.error(data.msg)
              }
            })
  },

  // 删除
  handleClickDelete(id){
  this.$http({
        url: this.$http.adornUrl(`/sys/quali/delete/`+id),
        method: 'get',
      }).then(({data}) => {
        if (data.code === 0) {
          this.$message.success('删除成功')
          this.getPolicyList()
        } else {
          this.$message.error(data.message)
        }
      })
  },
   /* 修改 */
   handleClickModification(id){
   this.$http({
              url: this.$http.adornUrl(`/sys/quali/toEdit/` + id),
              method: 'get',

            }).then(({data}) => {
              if (data.code === 0) {

                this.dataListEdit = data.data
                this.policyCenterDialogVisible = false

              } else {
                this.$message.error(data.msg)
              }
            })
   },
   resetForm() {

   },
    sizeChangeHandle(val){
    this.pageNum = 1
    this.pageSize = val
    this.getPolicyList() 

   },
   currentChangeHandle(val){
    this.pageNum = val
    this.getPolicyList() 
   }

}
}
</script>
<style scoped lang="scss">
  .inputcss{
  width: 300px;
  margin-right: 5px;
  }
  .policyForm{
    margin-top: 10px;
  }
  .mod-user{
    padding: 15px;
}

/deep/.el-dialog__wrapper{
.el-dialog{
.el-dialog__header{
    font-weight: bold;
    padding-bottom:20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
}

}
.formA{
    padding-right: 100px !important;
}
.selectA{
    width: 100% !important;
}
.div-tab{
    width: 100%;
    height: 40px;
    background-color: #ffffff;
}
/deep/.tabs-s .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
    border-right: none !important;
    border-left: none !important;
    background-color: #ffffff !important;
}
/deep/.tabs-s .el-tabs__active-bar {
    height: 2px !important;
}
.table-eee{
    margin-top: 10px;
}
</style>
